<template>
    <div class="zndlj-box">
        <div class="zndlj-banner">
            <img v-if="intelligent.banner" :src="intelligent.banner.image_url" alt="" class="zndlj-banner-image">
        </div>
        <div class="zndlj-content">
            <template v-if="intelligent.info && intelligent.info.length > 0">
                <div class="zndlj-content-box">
                    <template v-for="(item, index) in intelligent.info" :key="index">
                        <template v-if="item.display.big_headline == 1 && index != 1">
                            <div class="zndlj-content-title">
                                <strong>{{ item.big_headline }}</strong>
                            </div>
                            <el-divider content-position="center">
                                <div class="line"></div>
                            </el-divider>
                        </template>
                        <template v-if="item.display.title == 1 && index != 1">
                            <div class="zndlj-content-title2">
                                <strong>{{ item.title }}</strong>
                            </div>
                        </template>
                        <template v-if="item.display.content == 1 && index != 1">
                            <div class="zndlj-desc">
                                <p v-html="item.content"></p>
                            </div>
                        </template>
                        <template v-if="item.display.additional == 1 && index == 0">
                            <div class="tdjj-context">
                                <template v-for="(item2) in item.additional" :index="index2">
                                    <div class="tdjj-context-box">
                                        <div class="tdjj-list">
                                            <p style="white-space: pre-wrap;">{{ item2 }}</p>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                        <template v-if="item.display.additional == 1 && index == 1">
                            <div class="tdjj_2">
                                <div class="tdjj_2-box">
                                    <div class="tdjj_2-box_title">{{ item.title }}</div>
                                    <div class="tdjj_2-box_desc">{{ item.content }}</div>
                                    <div class="tdjj_2-box_1">
                                        <template v-for="(item2, index2) in item.additional" :index="2">
                                            <div class="tdjj_2-box1">
                                                <p>{{ item2 }}</p>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div class="tdjj_2-box_2" v-for="(item3, index3) in item.imgList" :key="index3"
                                    v-if="item.imgList">
                                    <img :src="item3" alt="">
                                </div>
                            </div>
                        </template>
                        <template v-if="item.display.image == 1">
                            <div class="zndlj-images-box" v-for="(item2, index2) in item.imgList" :key="index2">
                                <img :src="item2" alt="">
                            </div>
                        </template>
                        <template v-if="item.skuList && item.skuList.length > 0">
                            <div class="zndlj-content-box3">
                                <div class="zndlj-box3" v-for="(item2, index2) in item.skuList" :key="index2">
                                    <div class="zndlj-box3-images">
                                        <img :src="item2.images" alt="">
                                    </div>
                                    <div class="zndlj-box3-content">
                                        <div class="zndlj-box3-content-title">{{ item2.name }}</div>
                                        <div class="zndlj-box3-content-desc">
                                            <ul>
                                                <li v-for="(item3, index3) in item2.sku" :key="index3">
                                                    {{ item3 }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getIntelligentDetail } from '@/api/cp/product'
import { it } from 'element-plus/es/locales.mjs';


// 响应式数据，用于存储屏幕宽度
const screenWidth = ref(window.innerWidth);

const route = useRoute();
const id = route.query.id || 2;
// 在组件挂载时获取初始屏幕宽度
onMounted(() => {
    screenWidth.value = window.innerWidth;
});

// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);


const intelligent = ref({})
const moudle2 = ref([])

onMounted(() => {
    screenWidth.value = window.innerWidth;
    getIntelligentDetail({
        product_id: id
    }).then(res => {
        intelligent.value = res.data
        console.log(intelligent.value);
        res.data.info.map((item, key) => {
            if (key == 1) {
                moudle2.value = item.additional.map((item2, key2) => {
                    let res = {
                        title: item2.substring(0, 4),
                        content: item2,
                        key: '0' + (key2 + 1)
                    };
                    return res
                })
            }
        })
    })
})

</script>

<style lang="scss" scoped>
@media screen and (min-width: 1920px) {
    .zndlj-banner-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .tdjj_2 {
        width: 100%;
        height: 300px;
        margin-top: 50px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .tdjj_2-box_2 img {
        width: 550px;
        height: 300px;
    }

    .tdjj_2-box1 p {
        margin-left: 31px;
        margin-top: 20px;
        margin-bottom: -10px;
        width: 2em;
        word-break: break-all;
        /* 强制字符换行 */
        white-space: pre-wrap;
        /* 保留空白符但允许换行 */
        overflow-wrap: break-word;
        /* 长单词/字符强制换行 */
        line-height: 1.5;
        /* 根据实际情况调整行高 */
    }

    .tdjj_2-box_1 {
        height: 100px;
        width: 449px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .tdjj_2-box1 {
        border-right: 1px solid #666666;
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        border-left: 1px solid #666666;
        border-radius: 200px;
        background-color: transparent;
        height: 100px;
        width: 100px;
        margin-left: 15px;
    }

    .tdjj_2-box_title {
        font-size: 26px;
        color: #990000;
        margin-left: 186px;
    }

    .tdjj_2-box {
        height: 300px;
        background-color: rgb(242, 240, 229);
    }

    .tdjj_2-box_desc {
        font-size: 20px;
        color: #000000;
        line-height: 1.75;
        margin: 25px 5px;
    }

    .tdjj-context {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 30px;
    }

    .tdjj-context-box {
        width: 360px;
    }

    .tdjj-list {
        font-size: 16px;
        color: #888888;
        text-align: center;
    }

    .czg-box-img {
        max-width: 100%;
        height: auto;
    }

    .czg {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-left: -60px;
        margin-bottom: 30px;
    }

    .czg-box {
        background-color: rgb(243, 243, 243);
        margin-left: 80px;
        width: 200px;
        height: 212px;
        margin-top: 30px;
    }

    .czg-box-num {
        font-size: 46px;
        color: #339999;
        text-align: center;
        margin-top: 30px;
    }

    .czg-box-title {
        font-size: 18px;
        color: #222222;
        text-align: center;
        margin-top: 10px;
        line-height: 1.5;
    }

    .czg-box-desc {
        font-size: 15px;
        color: #999999;
        text-align: center;
        line-height: 2;
    }

    .czg-images {
        margin-bottom: 50px;
    }

    .czg-images img {
        width: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 150px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 24px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 36px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        width: auto;
        margin-bottom: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-images {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box {
        display: grid;
        place-items: center;

        img {
            width: 50vw;
        }
    }

    .zndlj-box2-list {
        display: flex;
        justify-content: space-between;
        width: 1197px;
        flex-wrap: wrap;
    }

    .zndlj-box2-content {
        width: 450px;
        margin-left: 87px;
        margin-right: 60px;
        line-height: 30px;
    }

    .zndlj-box2-images {
        margin-top: 50px;
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        margin-bottom: 50px;
    }

    .zndlj-box3 {
        width: 330px;
        height: 209px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
        margin-left: 21px;
    }

    .zndlj-box3-content-desc li {
        line-height: 30px;
    }

    .zndlj-box3-content {
        margin-left: 30px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1919px) {

    .zndlj-banner-image {
        max-width: 100%;
        height: auto;
    }

    .tdjj_2 {
        width: 100%;
        height: 300px;
        margin-top: 50px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .tdjj_2-box_2 img {
        width: 550px;
        height: 300px;
    }

    .tdjj_2-box1 p {
        margin-left: 31px;
        margin-top: 20px;
        margin-bottom: -10px;
        width: 2em;
        word-break: break-all;
        /* 强制字符换行 */
        white-space: pre-wrap;
        /* 保留空白符但允许换行 */
        overflow-wrap: break-word;
        /* 长单词/字符强制换行 */
        line-height: 1.5;
        /* 根据实际情况调整行高 */
    }

    .tdjj_2-box_1 {
        height: 100px;
        width: 449px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .tdjj_2-box1 {
        border-right: 1px solid #666666;
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        border-left: 1px solid #666666;
        border-radius: 200px;
        background-color: transparent;
        height: 100px;
        width: 100px;
        margin-left: 15px;
    }

    .tdjj_2-box_title {
        font-size: 26px;
        color: #990000;
        margin-left: 186px;
    }

    .tdjj_2-box {
        height: 300px;
        background-color: rgb(242, 240, 229);
    }

    .tdjj_2-box_desc {
        font-size: 20px;
        color: #000000;
        line-height: 1.75;
        margin: 25px 5px;
    }

    .tdjj-context {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 30px;
    }

    .tdjj-context-box {
        width: 360px;
    }

    .tdjj-list {
        font-size: 16px;
        color: #888888;
        text-align: center;
    }

    .czg-box-img {
        max-width: 100%;
        height: auto;
    }

    .czg {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-left: -60px;
        margin-bottom: 30px;
    }

    .czg-box {
        background-color: rgb(243, 243, 243);
        margin-left: 80px;
        width: 200px;
        height: 212px;
        margin-top: 30px;
    }

    .czg-box-num {
        font-size: 46px;
        color: #339999;
        text-align: center;
        margin-top: 30px;
    }

    .czg-box-title {
        font-size: 18px;
        color: #222222;
        text-align: center;
        margin-top: 10px;
        line-height: 1.5;
    }

    .czg-box-desc {
        font-size: 15px;
        color: #999999;
        text-align: center;
        line-height: 2;
    }

    .czg-images {
        margin-bottom: 50px;
    }

    .czg-images img {
        width: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 150px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 24px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 36px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        width: auto;
        margin-bottom: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-images {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box {
        display: grid;
        place-items: center;

        img {
            width: 50vw;
        }
    }

    .zndlj-box2-list {
        display: flex;
        justify-content: space-between;
        width: 1197px;
        flex-wrap: wrap;
    }

    .zndlj-box2-content {
        width: 450px;
        margin-left: 87px;
        margin-right: 60px;
        line-height: 30px;
    }

    .zndlj-box2-images {
        margin-top: 50px;
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        margin-bottom: 50px;
    }

    .zndlj-box3 {
        width: 330px;
        height: 209px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
        margin-left: 21px;
    }

    .zndlj-box3-content-desc li {
        line-height: 30px;
    }

    .zndlj-box3-content {
        margin-left: 30px;
    }
}


@media screen and (min-width: 769px) and (max-width: 1024px) {

    .tdjj_2 {
        width: 100%;
        height: 300px;
        margin-top: 50px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .tdjj_2-box_2 img {
        width: 550px;
        height: 300px;
    }

    .tdjj_2-box1 p {
        margin-left: 31px;
        margin-top: 20px;
        margin-bottom: -10px;
        width: 2em;
        word-break: break-all;
        /* 强制字符换行 */
        white-space: pre-wrap;
        /* 保留空白符但允许换行 */
        overflow-wrap: break-word;
        /* 长单词/字符强制换行 */
        line-height: 1.5;
        /* 根据实际情况调整行高 */
    }

    .tdjj_2-box_1 {
        height: 100px;
        width: 449px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .tdjj_2-box1 {
        border-right: 1px solid #666666;
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        border-left: 1px solid #666666;
        border-radius: 200px;
        background-color: transparent;
        height: 100px;
        width: 100px;
        margin-left: 15px;
    }

    .tdjj_2-box_title {
        font-size: 26px;
        color: #990000;
        margin-left: 186px;
    }

    .tdjj_2-box {
        height: 300px;
        background-color: rgb(242, 240, 229);
    }

    .tdjj_2-box_desc {
        font-size: 20px;
        color: #000000;
        line-height: 1.75;
        margin: 25px 5px;
    }

    .tdjj-context {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 30px;
    }

    .tdjj-context-box {
        width: 250px;
    }

    .tdjj-list {
        font-size: 16px;
        color: #888888;
        text-align: center;
    }

    .czg-box-img {
        margin-top: 50px;
        max-width: 100%;
        height: auto;
    }

    .czg {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-left: -60px;
        margin-bottom: 30px;
    }

    .czg-box {
        background-color: rgb(243, 243, 243);
        margin-left: 50px;
        width: 150px;
        height: 212px;
        margin-top: 30px;
    }

    .czg-box-num {
        font-size: 46px;
        color: #339999;
        text-align: center;
        margin-top: 30px;
    }

    .czg-box-title {
        font-size: 18px;
        color: #222222;
        text-align: center;
        margin-top: 10px;
        line-height: 1.5;
    }

    .czg-box-desc {
        font-size: 15px;
        color: #999999;
        text-align: center;
        line-height: 2;
    }

    .czg-images {
        margin-bottom: 50px;
    }


    .czg-images img {
        max-width: 100%;
        height: auto;
    }

    .zndlj-banner-image {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 100px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 24px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 36px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        width: auto;
        margin-bottom: 50px;
        padding: 0px 30px;

        span {
            display: block;
            width: 700px;
        }
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-images {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box {
        display: grid;
        place-items: center;

        img {
            width: 50vw;
        }
    }

    .zndlj-box2-list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: row;
        padding-left: 208px;
    }

    .zndlj-box2-content {
        width: 456px;
        margin-left: 10px;
        line-height: 30px;
    }

    .zndlj-box2-images {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
    }


    .zndlj-box2-images img {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        margin-top: 80px;
        margin-bottom: 50px;
        align-items: center;
        justify-content: space-evenly;
    }


    .zndlj-box3 {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 288px;
        height: 211px;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
        margin-left: 21px;
        margin-top: 10px;
    }

    .zndlj-box3-content-desc li {
        line-height: 30px;
    }
}

@media screen and (max-width: 768px) {
    .tdjj-context {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 30px;
    }

    .tdjj-list {
        font-size: 16px;
        color: #888888;
        text-align: center;
    }

    .tdjj-context-box {
        width: 250px;
    }

    .tdjj_2 {
        width: 100%;
        margin-top: 50px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .tdjj_2-box_2 img {
        width: 550px;
        height: 300px;
    }

    .tdjj_2-box1 p {
        margin-left: 31px;
        margin-top: 20px;
        margin-bottom: -10px;
        width: 2em;
        word-break: break-all;
        /* 强制字符换行 */
        white-space: pre-wrap;
        /* 保留空白符但允许换行 */
        overflow-wrap: break-word;
        /* 长单词/字符强制换行 */
        line-height: 1.5;
        /* 根据实际情况调整行高 */
    }

    .tdjj_2-box_1 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .tdjj_2-box1 {
        border-right: 1px solid #666666;
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        border-left: 1px solid #666666;
        border-radius: 200px;
        background-color: transparent;
        height: 100px;
        width: 100px;
        margin-top: 15px;
    }

    .tdjj_2-box_title {
        font-size: 26px;
        color: #990000;
        text-align: center;
    }

    .tdjj_2-box {
        height: 600px;
        background-color: rgb(242, 240, 229);
    }

    .tdjj_2-box_desc {
        font-size: 20px;
        color: #000000;
        line-height: 1.75;
        padding: 0 20px;
    }

    .zndlj-box3-images img {
        max-width: 100%;
        height: 100px;
    }

    .zndlj-banner-image {
        max-width: 100%;
        height: auto;
    }

    .zndlj-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }

    .zndlj-content-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }


    .zndlj-content-title2 {
        font-size: 15px;
        line-height: 1.75;
        color: #000000;
        text-align: center;
        margin-bottom: 30px;
    }

    .el-divider--horizontal {
        border-top: 1px var(--el-border-color) var(--el-border-style);
        display: block;
        height: 1px;
    }

    .zndlj-desc {
        height: 100%;
        word-wrap: break-word;
        font-size: 18px;
        line-height: 1.75;
        margin-bottom: 50px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .zndlj-images {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .zndlj-images-box:not(:first-child) {
        margin-top: 30px;
    }

    .zndlj-box2-list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .zndlj-box2-content {
        line-height: 3;
    }

    .zndlj-box2-images {
        margin-top: 50px;
        max-width: 100%;
        height: auto;
    }


    .zndlj-box2-images img {
        width: 352px;
        margin-left: 15px;
        max-width: 100%;
        height: auto;
    }

    .zndlj-content-box3 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin-top: 80px;
        margin-bottom: 50px;
    }



    .zndlj-box3 {
        height: 209px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .zndlj-box3-content-title {
        font-size: 24px;
        color: #b83333;
        text-align: justify;
    }

    .zndlj-box3-content-desc li {
        line-height: 2;
        width: 170px;
    }

    .zndlj-box3-content {
        margin-left: 30px;
    }
}
</style>